<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    center
    :visible.sync="openDetail"
    v-if="openDetail"
    append-to-body
    width="1024px"
  >
    <el-form
      ref="detailForm"
      :model="detailForm"
      label-width="120px"
      :disabled="true"
      v-if="this.detailForm.pkgNo === 'beps.133.001.01' || this.detailForm.pkgNo === 'beps.133.001.02'"
    >
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="交易流水号" prop="id">
            <el-input v-model="detailForm.id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报文标识号" prop="pkgId">
            <el-input v-model="detailForm.pkgId" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="明细标识号" prop="dtlNo">
            <el-input v-model="detailForm.dtlNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="工作日期" prop="workdate">
            <el-date-picker v-model="detailForm.workdate" style="width: 100%" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报文类型" prop="pkgType">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.pkgType === null || detailForm.pkgType === undefined
                  ? ''
                  : detailForm.pkgType + '-' + detailForm.pkgTypeDesc
              "
              placeholder="报文类型"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="业务类型" prop="bizTypeCode">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.bizTypeCode === null || detailForm.bizTypeCode === undefined
                  ? ''
                  : detailForm.bizTypeCode + '-' + detailForm.bizTypeCodeDesc
              "
              placeholder="业务类型"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="业务种类" prop="bizCtgyCode">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.bizCtgyCode === null || detailForm.bizCtgyCode === undefined
                  ? ''
                  : detailForm.bizCtgyCode + '-' + detailForm.bizCtgyCodeDesc
              "
              placeholder="业务种类"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="记账标志" prop="cbflag">
            <el-select style="width: 100%" v-model="detailForm.cbflag" placeholder="记账标志">
              <el-option
                v-for="dict in dictMap.CBFLAG"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣款合同编号" prop="chargeNumber">
            <el-input v-model="detailForm.chargeNumber" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款行行号" prop="payeeBrno">
            <el-input v-model="detailForm.payeeBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款行行名" prop="payeeBrName">
            <el-input v-model="detailForm.payeeBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人开户行行号" prop="payeeAccBrno">
            <el-input v-model="detailForm.payeeAccBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人开户行行名" prop="payeeAccBrName">
            <el-input v-model="detailForm.payeeAccBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人账号" prop="payeeActno">
            <el-input v-model="detailForm.payeeActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人名称" prop="payeeName">
            <el-input v-model="detailForm.payeeName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人地址" prop="payeeAddress">
            <el-input v-model="detailForm.payeeAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人账号" prop="payerActno">
            <el-input v-model="detailForm.payerActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="detailForm.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款行行号" prop="payerBrno">
            <el-input v-model="detailForm.payerBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款行行名" prop="payerBrName">
            <el-input v-model="detailForm.payerBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人开户行行号" prop="payerAccBrno">
            <el-input v-model="detailForm.payerAccBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款人开户行行名" prop="payerAccBrName">
            <el-input v-model="detailForm.payerAccBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人地址" prop="payerAddress">
            <el-input v-model="detailForm.payerAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="交易币种" prop="currencycd">
            <el-input v-model="detailForm.currencycd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="金额" prop="amount">
            <ht-amount-input v-model="detailForm.amount" placeholder="金额" :disable="true"></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="附言" prop="content">
            <el-input type="textarea" v-model="detailForm.content" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form
      ref="detailForm"
      :model="detailForm"
      label-width="120px"
      :disabled="true"
      v-if="this.detailForm.pkgNo === 'beps.127.001.01' || this.detailForm.pkgNo === 'beps.127.001.02'"
    >
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="交易流水号" prop="id">
            <el-input v-model="detailForm.id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报文标识号" prop="pkgId">
            <el-input v-model="detailForm.pkgId" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="明细标识号" prop="dtlNo">
            <el-input v-model="detailForm.dtlNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="工作日期" prop="workdate">
            <el-date-picker v-model="detailForm.workdate" style="width: 100%" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报文类型" prop="pkgType">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.pkgType === null || detailForm.pkgType === undefined
                  ? ''
                  : detailForm.pkgType + '-' + detailForm.pkgTypeDesc
              "
              placeholder="报文类型"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="业务类型" prop="bizTypeCode">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.bizTypeCode === null || detailForm.bizTypeCode === undefined
                  ? ''
                  : detailForm.bizTypeCode + '-' + detailForm.bizTypeCodeDesc
              "
              placeholder="业务类型"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="业务种类" prop="bizCtgyCode">
            <el-select
              style="width: 100%"
              v-model="
                detailForm.bizCtgyCode === null || detailForm.bizCtgyCode === undefined
                  ? ''
                  : detailForm.bizCtgyCode + '-' + detailForm.bizCtgyCodeDesc
              "
              placeholder="业务种类"
              :disabled="true"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="记账标志" prop="cbflag">
            <el-select style="width: 100%" v-model="detailForm.cbflag" placeholder="记账标志">
              <el-option
                v-for="dict in dictMap.CBFLAG"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款行行号" prop="payeeBrno">
            <el-input v-model="detailForm.payeeBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款行行名" prop="payeeBrName">
            <el-input v-model="detailForm.payeeBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人开户行行号" prop="payeeAccBrno">
            <el-input v-model="detailForm.payeeAccBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人开户行行名" prop="payeeAccBrName">
            <el-input v-model="detailForm.payeeAccBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人账号" prop="payeeActno">
            <el-input v-model="detailForm.payeeActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款人名称" prop="payeeName">
            <el-input v-model="detailForm.payeeName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="收款人地址" prop="payeeAddress">
            <el-input v-model="detailForm.payeeAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人账号" prop="payerActno">
            <el-input v-model="detailForm.payerActno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="detailForm.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款行行号" prop="payerBrno">
            <el-input v-model="detailForm.payerBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款行行名" prop="payerBrName">
            <el-input v-model="detailForm.payerBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人开户行行号" prop="payerAccBrno">
            <el-input v-model="detailForm.payerAccBrno" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款人开户行行名" prop="payerAccBrName">
            <el-input v-model="detailForm.payerAccBrName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="付款人地址" prop="payerAddress">
            <el-input v-model="detailForm.payerAddress" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="交易币种" prop="currencycd">
            <el-input v-model="detailForm.currencycd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="金额" prop="amount">
            <ht-amount-input v-model="detailForm.amount" placeholder="金额" :disable="true"></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="附言" prop="content">
            <el-input type="textarea" v-model="detailForm.content" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" align="center" class="dialog-footer">
      <el-button type="primary" @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HtAmountInput from "@/views/components/HtAmountInput";
export default {
  name: "StopPayApplyEntryDetail",
  components: { HtAmountInput },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      openDetail: false,
      //
    };
  },
  mounted() {
    const formOptions = [
      // 普通搜索

      {
        type: "dates",
        nameObj: {
          startTimeName: "workdate1",
          endTimeName: "workdate2",
        },
        defaultAttr: {
          size: "small",
          label: "工作日期",
          placeholder: ["请输入工作开始日期", "请输入工作结束日期"],
          format: "yyyy-MM-dd",
          valueFormat: "yyyyMMdd",
        },
      },

      {
        type: "input",
        prop: "idSeqNo",
        defaultAttr: {
          size: "small",
          label: "批次号",
          placeholder: "请输入批次号",
        },
      },

      {
        type: "dict",
        dict: "STOP_PAY_TYPE",
        prop: "pkgNo",
        defaultAttr: {
          size: "small",
          label: "报文类型",
          placeholder: "请输入报文类型",
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    show(data, pkgNo) {
      this.detailForm = data;
      this.detailForm.pkgNo = pkgNo;
      this.$set(this, "detailForm", this.detailForm);
      this.title = "借记业务交易明细";
      this.openDetail = true;
    },

    // 关闭按钮
    cancel() {
      this.openDetail = false;
      this.reset();
      done();
    },
  },
};
</script>
